<template>
	<view class="all">
		<div class="title">
			<div>我的标签</div>
			<div>
				<u-tag text="新增标签" mode="dark" shape="circle" bg-color="lightblue" @click="tagAdd" />
				<u-popup v-model="showPopup" :mask-close-able="false" width="400rpx">
					<div class="container">
						<input type="text" placeholder="请输入标签名" v-model.trim="tagName"/>
						<u-tag text="取消" mode="dark" shape="circle" bg-color="lightblue" @click="showPopup = false"/>	
						<u-tag text="确定" mode="dark" shape="circle" bg-color="lightblue" @click="submit"/>	
					</div>
				</u-popup>
			</div>
		</div>
		<div class="tags">
			<u-tag :text="item.tag_name" mode="dark" shape="circle" bg-color="pink" v-for="item in userTags"
				:key="item.tag_rela_id" @click="deleteTag(item)" />
			<u-modal v-model="isShowModal" @confirm="confirm" ref="uModal1" :async-close="true"
				content="确定删除该标签吗"></u-modal>
		</div>
		<div class="title">所有标签(点击加入我的标签)</div>
		<div class="tags">
			<u-tag :text="item.tag_name" mode="dark" shape="circle" bg-color="pink" v-for="item in tags"
				:key="item.tag_id" @click="addMyTags(item)" />
		</div>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		getTagsByUserId,
		getAllTags,
		addTagByClick,
		addTag,
		deleteTagById,
		newTag
	} from '../../api/tags.js'
	const userTags = ref([])
	const tags = ref([{
		tag_id: 1,
		tag_name: '2312'
	}])
	const tagName = ref('')
	const getUserTags = async () => {
		//获取用户的标签
		userTags.value = []
		const result = await getTagsByUserId({
			user_id: uni.getStorageSync('userInfo').user_id
		})
		userTags.value = result.data
		userTags.value.forEach((item) => {
			item.tag_name = item['tag_tab.tag_name']
		})
	}
	const getTagsAll = async () => {
		//获取所有标签
		tags.value = []
		const result1 = await getAllTags()
		tags.value = result1.data
	}
	onMounted(async () => {
		getUserTags()
		getTagsAll()
	})
	//点击加入我的标签
	const addMyTags = async (obj) => {
		const result = await addTagByClick({
			tag_id: obj.tag_id,
			user_id: uni.getStorageSync('userInfo').user_id
		})
		if (result.code == 1) {
			getUserTags()
		}
	}
	//点击增加标签
	const showPopup = ref(false)
	const tagAdd = () => {
		showPopup.value = true
	}
	const submit = async() => {
		if(tagName.value != ''){
			const result = await newTag({
				create_time:new Date(),
				tag_name:tagName.value,
				creater_type:0,
				nickname:uni.getStorageSync('userInfo').nickname
			})
			if(result.code == 1){
				uni.showToast({
					icon:'none',
					title:'添加成功'
				})
				showPopup.value = false
				getTagsAll()
				const result1 = await addTagByClick({
					tag_id:result.data.tag_id,
					user_id: uni.getStorageSync('userInfo').user_id
				})
				getUserTags()
			}
		}else{
			uni.showToast({
				icon:'none',
				title:'标签名不能为空'
			})
		}
	}
	const isShowModal = ref(false)
	//长安删除标签
	const deleteTag = (obj) => {
		isShowModal.value = true
		uni.setStorageSync('deleteTag',obj)
	}
	const confirm = async() => {
		const result = await deleteTagById({
			tag_rela_id:uni.getStorageSync('deleteTag').tag_rela_id
		})
		if(result.code == 1){
			uni.showToast({
				title:'删除成功',
				icon:'none'
			})
			getUserTags()
			isShowModal.value = false
		}
	}
	
	
</script>

<style lang="scss" scoped>
	.all {
		padding: 10rpx;

		.title {
			margin: 20rpx 0;
		}

		.title:nth-child(1) {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.container{
			padding: 20rpx 10rpx;
			input{
				margin: 0 0 20rpx 0;
			}
		}
	}

	//标签栏
	.tags {
		display: flex;
		flex-wrap: wrap;
		align-content: space-around;
		margin-top: 20rpx;

		u-tag {
			margin: 20rpx 20rpx 0 0;
		}
	}
</style>